<template>
	<view class="uni-swiper-br">
		<swiper class="swiper-bar" :style="{'height': Height}" @change='changeEvent' :indicator-dots="indicatorDots" indicator-color='#fff' indicator-active-color='#1296db' :autoplay="autoplay" :interval="interval" :circular='circular' :duration="duration">
			<swiper-item v-for="(item, index) in array" :key="index">
				<navigator hover-class='none' class="swiper-item" :url="item.url">
					<image class="swiper-item uni-bg-red" :src='path + item.img' />
				</navigator>
			</swiper-item>		
		</swiper>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'uniSwiperBar',
		title: '滑块视图容器',
		props: {
			array: {
				type: Array,
				default: []
			},
			height: {
				type: Number,
				default: 400
			}
		},
		computed: {
			Height() {
				return `${this.height}rpx`
			}
		},
		methods: {
			changeEvent(event) {
				this.$emit('change-event', event)
			}
		},
		data() {
			return {
				indicatorDots: true,								// 是否显示面板指示点
				autoplay: true,										// 是否自动切换
				interval: 3000,										// 自动切换时间间隔
				duration: 300,										// 滑动动画时长
				circular: true,										// 是否采用衔接滑动
				path: ''
			};
		},
		mounted() {
			this.path = this.$Path
		}
	}
</script>

<style lang="scss" scoped>
	.uni-swiper-br{
		width: 100%;
		position: relative;
	}
	.swiper-bar{
		width: 100%;
		height: 750upx;
		.swiper-item{
			width: 100%;
			height: 100%;
		}
	}
</style>
